{% extends "base.html" %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block header %}
    <link rel="stylesheet" href="{% static 'assets/css/swiper.min.css' %}">
{% endblock %}

{% block content %}
    <section class="hero" style="background-color:#2a2e2f">
        <div class="container">
            <div class="columns">
                <div class="column is-6">
                    <h1 class="title is-2 has-text-white">大连亿达信息软件有限公司</h1>
                    <h2 class="subtitle is-4 has-text-white">
                        <p align="right">——人工AI语义标注工具</p>
                        </h2>
                    <p>
                        <a href="{% url 'demo-named-entity-recognition' %}" class="button is-medium is-primary">
                            演示
                        </a>
                    </p>
                </div>
                <div class="column is-6">
                    <figure class="image">
                        <img src="{% static 'assets/images/named_entity_recognition.png' %}">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <div class="hero-body" style="background-image:linear-gradient(to bottom, #fafafa, #f3f3f3)">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="columns is-vcentered">
                        <div class="column is-5 is-offset-1">
                            <figure class="image">
                                <img src="{% static 'assets/images/sentiment_analysis.png' %}" alt="Description">
                            </figure>
                        </div>
                        <div class="column is-5">
                            <h1 class="title is-2">
                                Document Classification
                            </h1>
                            <h2 class="subtitle is-4">
                                Document annotation for any document classification tasks.
                            </h2>
                            <br>
                            <p>
                                <a href="{% url 'demo-text-classification' %}" class="button is-primary">
                                    演示
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="columns is-vcentered">
                        <div class="column is-5 is-offset-1">
                            <figure class="image">
                                <img src="{% static 'assets/images/named_entity_recognition.png' %}" alt="Description">
                            </figure>
                        </div>
                        <div class="column is-5">
                            <h1 class="title is-2">
                                Sequence Labeling
                            </h1>
                            <h2 class="subtitle is-4">
                                A super easy interface to tag for named entity recognition, part-of-speech tagging, and
                                semantic role labeling.
                            </h2>
                            <br>
                            <p>
                                <a href="{% url 'demo-named-entity-recognition' %}" class="button is-primary">
                                    演示
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="columns is-vcentered">
                        <div class="column is-5 is-offset-1">
                            <figure class="image">
                                <img src="{% static 'assets/images/translation.png' %}" alt="Description">
                            </figure>
                        </div>
                        <div class="column is-5">
                            <h1 class="title is-2">
                                Sequence to Sequence
                            </h1>
                            <h2 class="subtitle is-4">
                                A super easy interface to label for any sequence to sequence tasks.
                            </h2>
                            <br>
                            <p>
                                <a href="{% url 'demo-translation' %}" class="button is-primary">
                                    演示
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <div class="hero-body" style="background-image:linear-gradient(to bottom, #fafafa, #f3f3f3)">
        <div class="container">

            <div class="columns features">
                <div class="column is-4">
                    <div class="card is-shady">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="{% static 'assets/images/RWnpyGtY1aU.jfif' %}" alt="Placeholder image"
                                     class="modal-button" data-target="modal-image2">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="content">
                                <h4>Team Collaboration</h4>
                                <p>Invite other users to help you annotate text and create an annotated corpus. You only
                                    have to create a guideline
                                    and upload text data. Team collaboration can accelate the annotation process.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-4">
                    <div class="card is-shady">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="{% static 'assets/images/6Ticnhs1AG0.jfif' %}" alt="Placeholder image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="content">
                                <h4>Language independent</h4>
                                <p>doctool is independent of language - you can annotate texts regardless of the
                                    languages. You can quickly start annotating text.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-4 modal-button" data-target="modal-image">
                    <div class="card is-shady">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="{% static 'assets/images/baa924a5e3.png' %}" alt="Placeholder image">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="content">
                                <h4>Auto labeling</h4>
                                <p>Auto labeling is one of the most powerful tools in creating annotated corpora.
                                    Machine learning model automatically
                                    annotates texts. You're only required to correct a few error annotations.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="columns">
                <div class="column is-4">
                    <h2>
                        <strong class="has-text-white">Doctool</strong>
                    </h2>
                    <ul>
                        <li>
                        </li>
                        <li>
                            <a href="{% url 'demo-named-entity-recognition' %}">Live Demo</a>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                    </ul>
                </div>
                <div class="column is-4">
                    <h2>
                        <strong class="has-text-white">FEATURES</strong>
                    </h2>
                    <ul>
                        <li>
                            <a href="{% url 'demo-text-classification' %}">Text Classification</a>
                        </li>
                        <li>
                            <a href="{% url 'demo-named-entity-recognition' %}">Sequence Labeling</a>
                        </li>
                        <li>
                            <a href="{% url 'demo-translation' %}">Sequence to Sequence</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content has-text-centered">
                <p>

                    <br>
                </p>
            </div>
        </div>
    </footer>
{% endblock %}

{% block footer %}
    {% render_bundle 'index' 'js' %}
{% endblock %}
